<template>
    <div class="content" v-loading="loading">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" :rules="rules" ref="formInline" label-width="90px"  slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8" v-if="schoolType == 0">
                        <el-form-item label="年级" prop="gradeId">
                            <grade v-model="formInline.gradeId"
                                :isDefaultFill='true' 
                                @defaultFillGrade='defaultFillGrade'>
                            </grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                             <getclass v-model="formInline.classId" :grade='formInline.gradeId'></getclass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> 
                        <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <tableBox :tableHeader='rating' :classArr='classArr' :classId='formInline.classId' 
            @searchList="searchList">
            </tableBox>
        </TableLayout>
    </div>
</template>
<script>
import { getScoreHeader, listScore} from 'api/wisdom';
import TableLayout from 'components/TableLayout';
import tableBox from './tableBox';
import school from 'components/SchoolClasss/school';
import getClass from 'components/SchoolClasss/class';
import { mapState, mapActions, mapGetters } from 'vuex';
import grade from 'components/SchoolClasss/grade';
import getclass from 'components/SchoolClasss/class1';
export default{
    components: {TableLayout, school, getClass, tableBox, grade, getclass},
    data() {
        return {
            formInline: {// form表单数据
                classId: '',
                ratingData: '', // 评比日期
                schoolName: '',
                className: '',
                gradeId: ''
            },
            classArr: [], // 班级数组 传给子组件表格的表身
            rating: [], // table表头name
            // dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            onOff: true,
            loading: true,
            rules: {
                ratingData: [
                    { required: true, type: 'date', message: '请选择评选日期', trigger: 'change' }
                ],
                gradeId: [
                    {required: true, message: '请选择年级', trigger: 'blur'}
                ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'schoolId',
            'schoolType'
        ])
    },
    created() {         
        // if (!this.schoolType == 0) {
        //     this.searchFetchDataHead();
        // }
        if (this.schoolType !== '0') { // 学校类型为机构时，直接调查询接口
            this.searchFetchDataHead();
        }
    },
    watch: {// 学校类型为正常学校时，进入页面，监听gradeId的改变，再调查询接口
        'formInline.gradeId'(val) {
            if (val&&this.onOff) {
                this.searchFetchDataHead();
                this.onOff = false;
            }
        }
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        defaultFillGrade(gradeId) {
            this.formInline.gradeId=gradeId;
        },
        // 查询列表head
        searchFetchDataHead() {
            this.loading = true;
            let json={
                fSchoolId: this.schoolId,
                ratingTime: this.$route.params.id.substring(0, 19)
            }
            getScoreHeader(json).then(response => {  
                this.rating=[];   
                if (response.data.content) {
                    this.rating = [{term: '班级'}];// this.rating是表头 表头第一项没id
                    if (response.data.content[0].termOne) {
                        let obj = {
                            score: '',
                            term: '',
                            sRatingId: ''
                        }
                        obj.term = response.data.content[0].termOne;
                        obj.score = response.data.content[0].scoreOne;
                        obj.sRatingId = response.data.content[0].ratingOne;
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termTwo) {
                        let obj = {
                            score: '',
                            term: '',
                            sRatingId: ''
                        }
                        obj.term = response.data.content[0].termTwo;
                        obj.score = response.data.content[0].scoreTwo;
                        obj.sRatingId = response.data.content[0].ratingTwo;
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termThree) {
                        let obj = {
                            score: '',
                            term: '',
                            sRatingId: ''
                        }
                        obj.term = response.data.content[0].termThree;
                        obj.score = response.data.content[0].scoreThree;
                        obj.sRatingId = response.data.content[0].ratingThree;
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termFour) {
                        let obj = {
                            score: '',
                            term: '',
                            sRatingId: ''
                        }
                        obj.term = response.data.content[0].termFour;
                        obj.score = response.data.content[0].scoreFour;
                        obj.sRatingId = response.data.content[0].ratingFour;
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termFive) {
                        let obj = {
                            score: '',
                            term: '',
                            sRatingId: ''
                        }
                        obj.term = response.data.content[0].termFive;
                        obj.score = response.data.content[0].scoreFive;
                        obj.sRatingId = response.data.content[0].ratingFive;
                        this.rating.push(obj)
                    }
                    if (response.data.content[0].termSix) {
                        let obj = {
                            score: '',
                            term: '',
                            sRatingId: ''
                        }
                        obj.term = response.data.content[0].termSix;
                        obj.score = response.data.content[0].scoreSix;
                        obj.sRatingId = response.data.content[0].ratingSix;
                        this.rating.push(obj)
                    }
                    this.rating.push({term: '', score: response.data.content[0].totalScore})
                    this.searchFetchData();// 表身
                } 
            })
        },
        _getBackScore(item, scoreArr) {// 回填的分数
            if (item.termOne) {
                scoreArr.push(item.scoreOne)
            }
            if (item.termTwo) {
                scoreArr.push(item.scoreTwo)
            }
            if (item.termThree) {
                scoreArr.push(item.scoreThree)
            }
            if (item.termFour) {
                scoreArr.push(item.scoreFour)
            }
            if (item.termFive) {
                scoreArr.push(item.scoreFive)
            }
            if (item.termSix) {
                scoreArr.push(item.scoreSix)
            }
            if (item.totalScore) {
                scoreArr.push(item.totalScore)
            }
        },
        // 查询列表 表身
        searchFetchData() {
            let json={
                fSchoolId: this.schoolId,
                fClassId: this.formInline.classId,
                gradeId: this.formInline.gradeId,
                ratingTime: this.$route.params.id.substring(0, 19)
            }
            listScore(json).then(response => {
                this.classArr=[];
                this.loading = false;
                if (response.data.content) {
                    response.data.content.forEach((item, index) => {
                        let scoreArr=[];
                        this._getBackScore(item, scoreArr);
                        let inputArr=[];// 里面不包括班级那一项
                        this.rating.forEach((element, index1) => {// 每个班级后面添加 评比项的ipnut model
                            if (index1!==0) {// 因为rating是包括表头班级的
                                inputArr.push({
                                    score: scoreArr[index1-1], 
                                    ratingPosition: index1, 
                                    sRatingId: element.sRatingId, 
                                    maxScore: element.score, 
                                    termName: element.term
                                })
                            }
                        })
                        item['inputArr'] = inputArr;
                        // this.classArr.push(item)// 传给子组件的班级 
                    });
                    this.classArr=response.data.content;
                }          
            }).catch(() => {
                this.loading = false;
            });
        },
          // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchDataHead();
        },
        handleCurrentChange(val) {            
            this.listQuery.page = val;
            this.searchFetchDataHead();
        },
        searchList() {
            this.$store.dispatch('UpdateCache', true); // 列表刷新
        },
        // 表单查询
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.searchFetchDataHead();
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .btnPosition {
        float:right;
    }
}
</style>